import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:wan_android_flutter/common/resources/text_styles.dart';
import 'package:wan_android_flutter/common/routes/route_manager.dart';
import 'package:wan_android_flutter/modules/main/drawer/drawer_page.dart';
import 'package:wan_android_flutter/res/assets_res.dart';

import '../../common/resources/colors/color_data.dart';
import '../../generated/locales.g.dart';
import 'main_logic.dart';
import 'main_state.dart';

class MainPage extends StatelessWidget {
  MainPage({super.key});

  final MainLogic logic = Get.find<MainLogic>();

  @override
  Widget build(BuildContext context) {
    final MainLogic logic = Get.find<MainLogic>();
    final MainState mainState = logic.state;
    final drawerWidth = context.width / 3 * 2;
    return Scaffold(
      key: mainState.scaffoldKey,
      backgroundColor: ColorData.of(context).bgWhite,
      resizeToAvoidBottomInset: false,
      drawerEdgeDragWidth: 60,
      appBar: AppBar(
        toolbarHeight: 56,
        leading: IconButton(
            icon: const Icon(Icons.menu),
            color: ColorData.of(context).textWhite,
            onPressed: () {
              mainState.scaffoldKey.currentState?.openDrawer();
            }),
        title: Text(
          LocaleKeys.app_name.tr,
          style: ColorData.of(context).bgWhite.s20.regular,
        ),
        backgroundColor: ColorData.of(context).textBlue,
        actions: [
          IconButton(
              icon: const Icon(Icons.local_fire_department_outlined),
              color: ColorData.of(context).textWhite,
              onPressed: () {
                Get.toNamed(RouteManager.hotPage);
              }),
          IconButton(
              icon: const Icon(Icons.search),
              color: ColorData.of(context).textWhite,
              onPressed: () {
                Get.toNamed(RouteManager.searchPage);
              })
        ],
      ),
      drawer: SizedBox(
        width: drawerWidth,
        child: Drawer(
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
          ),
          child: DrawerPage(),
        ),
      ),
      onDrawerChanged: (isShow) {
        mainState.isShowingDrawer.value = isShow;
      },
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
              child: TabBarView(
            controller: logic.tabController,
            children: logic.state.childrenWidgetList
                .map(
                  (child) =>
                      Container(padding: const EdgeInsets.symmetric(vertical: 8), child: child),
                )
                .toList(),
          )),
          const Divider(
            height: 1,
            thickness: 0.5,
            color: Colors.grey,
          ),
          Container(
            color: ColorData.of(context).bgWhite,
            height: 70,
            child: TabBar(
              indicator: const BoxDecoration(),
              controller: logic.tabController,
              tabs: [
                Obx(() {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(AssetsRes.HOME,
                          width: 25,
                          height: 25,
                          color: logic.state.currentTabIndex.value == 0
                              ? ColorData.of(context).textBlue
                              : ColorData.of(context).textGray),
                      Text(
                        logic.state.tabLocalKeyList.first,
                        style: logic.state.currentTabIndex.value == 0
                            ? ColorData.of(context).textBlue.s14.regular
                            : ColorData.of(context).textGray.s14.regular,
                      )
                    ],
                  );
                }),
                Obx(() {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(AssetsRes.KNOWLEDGE,
                          width: 25,
                          height: 25,
                          color: logic.state.currentTabIndex.value == 1
                              ? ColorData.of(context).textBlue
                              : ColorData.of(context).textGray),
                      Text(
                        logic.state.tabLocalKeyList.last,
                        style: logic.state.currentTabIndex.value == 1
                            ? ColorData.of(context).textBlue.s14.regular
                            : ColorData.of(context).textGray.s14.regular,
                      )
                    ],
                  );
                }),
              ],
              // margin: const EdgeInsets.symmetric(horizontal: 0),
            ),
          ),
        ],
      ),
    );
  }
}
